<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-form :form="form" :labelCol="{ span: 5 }" labelAlign="left">
      <a-form-item label="宠物名称：" :wrapperCol="{ span: 18 }" required>
        <a-input
          placeholder="请输入宠物名称"
          :value="form.petName"
          @change="handleChange('petName', $event)"
        />
      </a-form-item>
      <a-form-item label="宠物品种：" :wrapperCol="{ span: 18 }" required>
        <a-select
          :value="form.petBreed"
          @change="handleChange('petBreed', $event)"
          placeholder="请选择宠物品种"
        >
          <a-select-option
            v-for="i in petBreedList"
            :key="i.value"
            :value="i.value"
          >
            {{ i.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="宠物年龄(月)：" :wrapperCol="{ span: 18 }" required>
        <a-input
          :value="form.petAge"
          placeholder="请输入宠物年龄"
          @change="handleChange('petAge', $event)"
        />
      </a-form-item>
      <a-form-item label="宠物体重(kg)：" :wrapperCol="{ span: 18 }" required>
        <a-input
          placeholder="请输入宠物体重"
          :value="form.petWeight"
          @change="handleChange('petWeight', $event)"
        />
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
export default {
  name: "PetFrom",
  emit: ["setPetFromData"],
  props: ["form", "petBreedList"],
  data() {
    return {};
  },
  methods: {
    handleChange(type, target) {
      console.log("target", type, target);
      this.$emit("setPetFromData", {
        value: ["petBreed"].includes(type) ? target : target.target.value,
        type,
      });
    },
  },
};
</script>

<style scoped>
.rounded_8 {
  border-radius: 8px;
}
</style>
